<template>
    <div style="overflow-x: hidden">
        <!-- <div class="role-title">方案制定</div> -->
        <Row :gutter="16">
            <Col span="6">
                <Button type="primary" style="margin-right:20px;" @click="addCsModal = !addCsModal,title = '管控措施新增',type='add'">新增方案</Button>
                <Button type="primary" @click="selectTable.length == palnObj.reviseMeasuresDtoList.length ? $Modal.confirm({
                title: '删除提示',
                content: '<p>确认删除当前项吗？</p>',
                okText: '确定',
                cancelText: '取消',
                onOk: () => {
                    palnObj.reviseMeasuresDtoList = []
                }
            }) : $Message.warning('请点击全选')">不涉及</Button>
            </Col>
        </Row>
        <Row :gutter="60" style="margin-top:20px;">
            <Col span="12">
                <Row>
                    <Col span="12" style="font-size:13px;">
                        *请先勾选相应的管控措施，添加管控人
                    </Col>
                    <Col span="12" style="text-align:right;font-size:13px;color:#0099FF;">
                        <span @click="lookPast = !lookPast,processControlHistory()" style="cursor: pointer;">点击查看过往每月管控情况</span>
                    </Col>
                    <Col span="24" style="margin-top:10px;">
                        <Input v-model.trim="palnObj.riskControlDetailOne" type="textarea" :rows="3" placeholder="请输入" />
                    </Col>
                </Row>
            </Col>
            <Col span="12">
                <Row>
                    <Col span="24" style="font-size:13px;">
                        *工程公司当月管控要求
                    </Col>
                    <Col span="24" style="margin-top:10px;">
                        <Input v-model.trim="palnObj.riskControlRequirementOne" type="textarea" :rows="3" placeholder="请输入" />
                    </Col>
                </Row>
            </Col>
        </Row>
        <div style="margin-top:20px;">
            <Row class="paln-table-title">
                <Col span="6" style="color:#EF3E43;">
                    *请先勾选相应的管控措施，添加管控人
                </Col>
                <Col span="6">
                    <span class="col-title">项目部管控责任人</span>
                    <Button style="color: #2d8cf0" @click="selectPersonnel(1)">选择人员</Button>
                </Col>
                <Col span="6">
                    <span class="col-title">项目部分管领导</span>
                    <Button style="color: #2d8cf0" @click="selectPersonnel(2)">选择人员</Button>
                </Col>
                <Col span="6">
                    <span class="col-title">项目部主管领导</span>
                    <Button style="color: #2d8cf0" @click="selectPersonnel(3)">选择人员</Button>
                </Col>
            </Row>
            <Row>
                <Col span="24" style="font-size:13px;">
                    <Table border :columns="columns1" :data="palnObj.reviseMeasuresDtoList" @on-selection-change="selectionChange">
                        <template slot-scope="{ row, index }" slot="action">
                            <a class="action-button" @click="initRemoveRow(index,row)">不涉及</a>
                            <!-- <a class="action-button" @click="title='管控措施详情',addCsModal = !addCsModal,type='detail'">详情</a> -->
                        </template>
                    </Table>
                </Col>
            </Row>
        </div>
        <Row :gutter="30" style="margin-top:40px;">
          <Col span="12" style="text-align:right;">
            <Button type="primary" @click="saveBtn">保存</Button>
          </Col>
          <Col span="12" >
            <Button @click="$emit('isPlanMethods',false)">取消</Button>
          </Col>
        </Row>
        <Modal v-model="addCsModal" :title="title" :footer-hide="true" width="50%">
            <detail v-if="addCsModal" :type="type" @detailModal="detailModal" @detailModalObj="detailModalObj"></detail>
        </Modal>
      <Modal v-model="lookPast" title="查看过往每月安全管控情况" :footer-hide="true" width="40%">
        <div style="background-color: #f5f5f5;padding:5px 10px;" v-for="(item,index) in personObj" :key="index">
          <div>
            <span class="span-month">{{item.month}}月该风险管控情况</span>
            <div class="month-con">
              {{item.riskControlDetailOne}}
            </div>
            <div style="text-align:right;" v-show="item.riskControlDetailOne">
              <Button type="primary" @click="palnObj.riskControlDetailOne = item.riskControlDetailOne,lookPast=!lookPast">引用</Button>
            </div>
          </div>
          <div class="span-month">
            填写人：{{item.riskControlUserName}}({{item.riskControlUserPostName}})
          </div>
          <div class="span-month">
            填写时间：{{$time(new Date(item.riskControlOperateTime),'yyyy-MM-dd')}}
          </div>
        </div>
      </Modal>
        <Modal v-model="personModel" title="人员选择" :footer-hide="true" width="80%">
            <checkPersonModal @func="getMsg" :detailShow="true"></checkPersonModal>
        </Modal>
    </div>
</template>
<script>
import checkPersonModal from '../../../views/MeasurePlan/checkPersonModal'
import detail from './plan-detail'
export default {
    components:{
        detail,
        checkPersonModal
    },
    props:{
      revise:Boolean,
      riskOrderId:''
    },
    data(){
      return{
        formItem:{},
        addCsModal:false,
        lookPast:false,
        personModel:false,
        isrevise:false,
        title:'',
        type:'',
        currentPage:1,
        columns1: [
            {
                type: 'selection',
                align: 'center'
            },
            {
                title: '序号',
                align: 'center',
                render: (h, params) => {
                    return h('span', params.index + (this.currentPage- 1) * this.currentPage + 1);
                }
            },
            {
                title: '管控措施',
                key: 'measures',
                align: 'center'
            },
            {
                title: '项目部管控责任人',
                key: 'projectManagementDepartmentName',
                align: 'center'
            },
            {
                title: '项目部分管领导',
                key: 'projectManagementLeaderName',
                align: 'center'
            },
            {
                title: '项目部主管领导',
                key: 'leaderInChargeOfProjectDepartmentName',
                align: 'center'
            },
            {
                title: '操作',
                slot: 'action',
                align: 'center'
            },
        ],
        palnObj:{
          riskOrderId:'',
          riskControlDetailOne:'',
          riskControlRequirementOne:'',
          deletedMeasuresIdList:[],
          reviseMeasuresDtoList: [],
        },
        personObj:[],
        selectTable:[],
        personType:''
      }
    },
    methods: {
      // 点击查看过往每月管控情况
      processControlHistory(){
        this.$api.MonthlyDynamics.processControlHistory(this.riskOrderId).then(resp=>{
          if(resp.code === 200){
            this.personObj = resp.data
          }
        })
      },
        //列表
      getDynamicRiskOrderrevisedetail(){
        if(this.isrevise){//修订--方案制定--列表
          this.$api.MonthlyDynamics.getDynamicRiskOrderrevisedetail(this.riskOrderId).then(res => {
            if(res.code === 200){
              this.palnObj.reviseMeasuresDtoList = res.data.measuresPeople;
              this.palnObj.riskControlDetailOne = res.data.riskControlDetailOne;
              this.palnObj.riskControlRequirementOne = res.data.riskControlRequirementOne;
              this.palnObj.reviseMeasuresDtoList.forEach((value,index) => {
                value.numId = index;
              })
            }else {
              this.$Message.warning(res.message)
            }
          })
        }
      },
        initRemoveRow(index,row) {
          this.$Modal.confirm({
            title: '删除提示',
            content: '<p>确认删除当前项吗？</p>',
            okText: '确定',
            cancelText: '取消',
            onOk: () => {
              this.palnObj.reviseMeasuresDtoList.splice(index, 1);
              if(row.measuresId){
                this.palnObj.deletedMeasuresIdList.push(row.measuresId);
              }
            }
          })
        },
        // 关闭新增方案的框
        detailModal(res){
            this.addCsModal = res
        },
        // 接收新增方案的值
        detailModalObj(res){
            res.numId = this.palnObj.reviseMeasuresDtoList.length
            this.palnObj.reviseMeasuresDtoList.push(res)
        },
        // table选择操作
        selectionChange(val){
          this.selectTable = val
        },
        // 人员选择
        selectPersonnel(type){
          this.personType = type
          if(this.selectTable.length > 0){
              this.personModel = !this.personModel
          }else{
              this.$Message.warning('请先选择需要设置的管控措施')
          }
        },
        getMsg(res){
          this.selectTable.forEach(a=>{
            this.palnObj.reviseMeasuresDtoList.forEach(e=>{
              this.$set(e, 'random', +new Date());
              if(a.numId == e.numId){
                if(this.personType == 1){
                  this.$set(e,'projectManagementDepartment',res.personUserOrgId);
                  this.$set(e,'projectManagementDepartmentName',res.name);
                }else if(this.personType == 2){
                  this.$set(e,'projectManagementLeader',res.personUserOrgId);
                  this.$set(e,'projectManagementLeaderName',res.name);
                }else{
                  this.$set(e,'leaderInChargeOfProjectDepartment',res.personUserOrgId);
                  this.$set(e,'leaderInChargeOfProjectDepartmentName',res.name);
                }
              }
            })
          })
          this.selectTable = []
          this.personModel = false
        },
      saveBtn(){
        if(!this.palnObj.riskControlDetailOne){
          this.$Message.warning('目前该风险安全管控情况不能为空');
          return;
        }
        if(!this.palnObj.riskControlRequirementOne){
          this.$Message.warning('工程公司当月管控要求不能为空');
          return;
        }
        if(!this.palnObj.reviseMeasuresDtoList || this.palnObj.reviseMeasuresDtoList.length <= 0){
          this.$Message.warning('请新增一个管控措施');
          return
        }
        this.palnObj.riskOrderId = this.riskOrderId;
        this.$emit('isPlanObj',JSON.stringify(this.palnObj))
        this.$emit('isPlanMethods',false)
      },
    },
  created(){
    this.isrevise=this.revise;
  },
  watch:{
    riskOrderId(val){
      this.riskOrderId = val;
      this.getDynamicRiskOrderrevisedetail(this.riskOrderId);
    },
  },
}
</script>
<style scoped>
.paln-table-title{
    border:1px solid #dcdee2;
    border-bottom:none;
    min-height:50px;
    line-height: 50px;
    font-size: 13px;
    padding: 0 10px;
}
.col-title{
    height:50px;
    line-height: 50px;
    display: inline-block;
    float: left;
    padding-right: 10px;
}
.action-button{
    padding: 0 10px 0 0;
}
.span-month{
    font-size: 13px;
    font-weight: bold;
    display: block;
    color: #17233d;
    height: 30px;
    line-height: 30px;
}
.month-con{
    padding-left: 40px;
    font-size: 13px;
}
</style>
